<!-- vip14html课程 声明html文件，使用版本是html5 -->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <title>HTML学习</title>
    <script src="https://pss.bdstatic.com/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
    <script src="vip14js.js"></script>
    <style>
        h1, span {
            font-family: 楷体;
            font-size: 80px;
            color: #3737c6;
        }

        h1 {
            border: 5px solid;
            border-radius: 20px
        }
    </style>
    <!-- 用来引入第三方的文件 链接iink 是一个没有结束符的标签。 -->
</head>
<body>
<div id="header">
    <h1 onmouseover="h1On()" onmouseout="h1Out()">欢迎大家来到特斯汀HTML学习课程</h1>
</div>
<hr>
<div id="content" style="text-align: center">
    <h4></h4>
    <hr>
    <div id="userForm">
        <form method="post" action="/user" style="text-align:center">
            <div class="bottom-10">
                姓名:<input type="text" name="username" placeholder="请输入姓名">
            </div>
            <div class="bottom-10">
                密码：<input type="password" name="password" oninput="console.log('正在输密码')">
            </div>
            <div class="bottom-10">
                性别：<input type="radio" name="gender" value="男" id="male">
                <label for="male">男</label>
                <!--                直接用label把input和文字包裹起来-->
                <label><input type="radio" name="gender" value="女"> 女</label>
            </div>
            <div>
                爱好：<input type="checkbox" name="hobby" value="睡觉" id="sleep">
                <label for="sleep">睡觉</label>
                <!--                直接用label把input和文字包裹起来-->
                <label><input type="checkbox" name="hobby" value="打游戏"> 打游戏</label>
            </div>
            <input type="color" name="color">
            <input type="number" name="age">
            <div>
                喜欢的歌手：<select name="singer">
                <option value="jay">周杰伦</option>
                <option value="jj">林俊杰</option>
                <option value="蔡依林">蔡依林</option>
                <option value="Linkin Park">Linkin Park</option>
            </select>
            </div>
            <div>
                <input type="submit" value="提交表格"
                       style="color: #ed6249;width: 100px;height:40px;border-radius: 40px;border: 3px dashed #05c1c1;"/>
                <button type="button" onclick="ajaxLogin()" style="color: #ed6249;width: 100px;height:40px;border-radius: 40px;border: 3px dashed #05c1c1;">Ajax登录</button>
                <button type="button" onclick="logOut()" style="color: #ed6249;width: 100px;height:40px;border-radius: 40px;border: 3px dashed #05c1c1;">注销</button>
            </div>

        </form>
    </div>
</div>
</body>
</html>